<template>
  <q-dialog class="work-order-bad-report" v-model="show" persistent>
    <q-card v-drag style="min-width: 760px">
      <q-card-section class="dialog-title bg-primary">
        <div style="position: absolute;color: #fff">
          <span class="text-ellipsis" style="width: 200px">
            {{ `[${form.id ? form.id : '—'}]` }}
            <q-tooltip>{{ `[${form.id ? form.id : '—'}]` }}</q-tooltip>
          </span>
        </div>
        <div class="text-center text-white">{{ '填报不良' }}</div>
      </q-card-section>
      <q-form @submit="submit" @reset="reset"  class="q-gutter-md dialog-content" greedy>
        <q-card-section>
          <div class="row">
            <div class="col">
              <table>
                <tr>
                  <td>
                    <span class="text text-ellipsis">产品: {{ form.materialName ? form.materialName : '—' }}({{ form.materialNumber ? form.materialNumber : '—' }})</span>
                    <q-tooltip>产品: {{ form.materialName ? form.materialName : '—' }}({{ form.materialNumber ? form.materialNumber : '—' }})</q-tooltip>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="text text-ellipsis">加工设备: {{ form.deviceName ? form.deviceName : '—' }}</span>
                    <q-tooltip>加工设备: {{ form.deviceName ? form.deviceName : '—' }}</q-tooltip>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="text text-ellipsis">已报不良: {{ form.rejectionCount }}</span>
                    <q-tooltip>已报不良: {{ form.rejectionCount }}</q-tooltip>
                  </td>
                </tr>
              </table>
            </div>
            <div class="col">
              <table>
                <tr>
                  <td>
                    <span class="text text-ellipsis">订单编号: {{ form.orderNumber ? form.orderNumber : '—' }}</span>
                    <q-tooltip>订单编号: {{ form.orderNumber ? form.orderNumber : '—' }}</q-tooltip>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="text text-ellipsis">派工班次: {{ form.shiftName ? form.shiftName : '—' }}</span>
                    <q-tooltip>派工班次: {{ form.shiftName ? form.shiftName : '—' }}</q-tooltip>
                  </td>
                </tr>
              </table>
            </div>
            <div class="col">
              <table>
                <tr>
                  <td>
                    <span class="text text-ellipsis">批次编号: {{ form.orderBatch ? form.orderBatch : '—' }}</span>
                    <q-tooltip>批次编号: {{ form.orderBatch ? form.orderBatch : '—' }}</q-tooltip>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="text text-ellipsis">作业人员: {{ form.operator ? form.operator : '—' }}</span>
                    <q-tooltip>作业人员: {{ form.operator ? form.operator : '—' }}</q-tooltip>
                  </td>
                </tr>
              </table>
            </div>
            <div class="col">
              <table>
                <tr>
                  <td>
                    <span class="text text-ellipsis">加工工序: {{ (form.processSort && form.processName) ? `${form.processSort}-${form.processName}` : '—' }}</span>
                    <q-tooltip>加工工序: {{ (form.processSort && form.processName) ? `${form.processSort}-${form.processName}` : '—' }}</q-tooltip>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="text text-ellipsis">完工数量: {{ form.finishedCount ? form.finishedCount : '—' }}</span>
                    <q-tooltip>完工数量: {{ form.finishedCount ? form.finishedCount : '—' }}</q-tooltip>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </q-card-section>
        <div style="padding: 0 10px 20px; margin-top: 0">
          <q-card-section class="dialog-title bg-primary" style="border-top-left-radius: 6px; border-top-right-radius: 6px; display: flex;justify-content: space-between">
            <div class="text-center text-white">{{ '不良填入 ' }}<span style="font-size: 14px">(最多增加五条)</span></div>
            <a style="color: #fff;cursor: pointer;font-size: 18px" class="iconfont  icontubiao-50" @click="addRow">
              <q-tooltip>
                添加不良记录
              </q-tooltip>
            </a>
          </q-card-section>
          <q-table
            color="primary"
            :data="tableData" :columns="columns"
            row-key="id"
            class="myTable scroll"
            style="margin: 0"
            :pagination.sync="pagination" hide-bottom
            no-data-label="暂无数据">
            <template v-slot:body="props">
              <q-tr :props="props">
                <q-td key="index" :props="props">
                  {{ tableData.indexOf(props.row) + 1 }}
                </q-td>
                <q-td key="badType" :props="props" style="padding-top: 10px">
                  <q-select
                    @input="getCauseItem(props.row)"
                    style="width: 150px"
                    v-model="props.row.badType"
                    :options="badTypeOptions"
                    :rules="[
                      val => (val !== undefined && val !== null) || '请选择不良原因类型',
                    ]"
                    dense
                    options-dense
                    emit-value
                    map-options
                    outlined
                  >
                    <template v-slot:no-option>
                      <div class="no-option"/>
                    </template>
                    <template v-slot:before>
                      <label class="text-right" style="font-size: 14px;color: #333">
                        <span class="text-red">*</span>
                      </label>
                    </template>
                  </q-select>
                </q-td>
                <q-td key="badReasons" :props="props" style="padding-top: 10px">
                  <q-select
                    style="width: 150px"
                    v-model="props.row.badReasons"
                    :options="props.row.badReasonsOptions"
                    :rules="[
                      val => (val !== undefined && val !== null) || '请选择不良原因',
                      val => judgeBadReasons(val, props.row) || '已含有相同的不良原因'
                    ]"
                    dense
                    options-dense
                    emit-value
                    map-options
                    outlined
                  >
                    <template v-slot:no-option>
                      <div class="no-option"/>
                    </template>
                    <template v-slot:before>
                      <label class="text-right" style="font-size: 14px;color: #333">
                        <span class="text-red">*</span>
                      </label>
                    </template>
                  </q-select>
                </q-td>
                <q-td key="badCount" :props="props" style="padding-top: 10px">
                  <q-input
                    ref="badCount"
                    style="width: 150px"
                    v-model="props.row.badCount"
                    dense
                    outlined
                    :rules="[
                      val =>  /^\d*$/.test(val) && val > 0 || '请输入大于0的纯数字',
                      val => judgeCount(val) || '不良数不合法'
                    ]"
                  >
                    <template v-slot:before>
                      <label class="text-right" style="font-size: 14px;color: #333">
                        <span class="text-red">*</span>
                      </label>
                    </template>
                  </q-input>
                </q-td>
                <q-td class="operations"  style="width: 20px">
                  <div class="btn-group">
                    <q-btn
                      :disable="tableData.length === 1"
                      style="font-size: 18px"
                      flat round dense
                      @click="deleteRow(props.row)"
                      color="primary"
                      class="iconfont icontubiao-16"
                    >
                    </q-btn>
                  </div>
                </q-td>
              </q-tr>
            </template>
          </q-table>
        </div>
        <q-separator />
        <div class="dialog-footer text-center margin-t-10">
          <q-btn outline label="取消" color="primary" @click="$emit('close')" class="q-mr-md"/>
          <q-btn unelevated label="确认" color="primary" type="submit"/>
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script>
import { getCauseType, getCauseItem } from 'src/boot/job/process-order'
export default {
  name: 'work-order-bad-report',
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data () {
    return {
      badTypeOptions: [], // 不良原因类型数据源
      // badReasonsOptions: [], // 不良原因数据源
      form: [],
      pagination: {
        rowsPerPage: 0
      },
      tableData: [{
        index: 0,
        badType: '',
        badReasons: '',
        badCount: 1,
        badReasonsOptions: []
      }],
      columns: [
        { name: 'index', label: '序号', align: 'left', field: 'index' },
        { name: 'badType', label: '不良类型', field: 'badType', align: 'left' },
        { name: 'badReasons', label: '不良原因', field: 'badReasons', align: 'left' },
        { name: 'badCount', label: '不良数量', field: 'badCount', align: 'left' },
        { name: 'operations', field: 'operations', label: '操作', align: 'center' }
      ]
    }
  },

  created () {
    this.getCauseType()
  },
  methods: {
    // 初始化不良原因组
    getCauseType () {
      getCauseType(1).then(res => {
        res.data.forEach(o => {
          this.badTypeOptions.push({
            value: o.id,
            label: o.label
          })
        })
      })
    },

    // 查询不良原因
    getCauseItem (row) {
      row.badReasonsOptions = []
      getCauseItem(row.badType).then(res => {
        res.data.forEach(o => {
          row.badReasonsOptions.push({
            value: o.id,
            label: o.label
          })
        })
      })
    },

    // 编辑填充表格
    assignment (val) {
      this.form = val
    },

    // 验证完工数量
    judgeCount () {
      let ret = false
      let NumberOfReports = 0
      this.tableData.forEach(o => {
        NumberOfReports = NumberOfReports + parseInt(o.badCount)
      })
      this.form.finishedCount - this.form.rejectionCount >= NumberOfReports ? ret = true : ret = false
      return ret
    },

    // 提交表单
    submit () {
      const query = []
      let label = ''
      this.tableData.forEach(o => {
        o.badReasonsOptions.forEach(item => {
          if (o.badReasons === item.value) {
            label = item.label
          }
        })
        query.push({
          isQualityControl: false,
          causeId: o.badReasons,
          count: o.badCount,
          gid: o.badType,
          orderId: this.form.id,
          shiftsId: this.form.shiftId,
          deviceId: this.form.deviceId,
          label: label
        })
      })
      this.$emit('submit', query)
    },

    // 清空表单
    reset () {
      this.tableData = [{
        index: 0,
        badType: '',
        badReasons: '',
        badCount: 1,
        badReasonsOptions: []
      }]
    },

    // 添加表格行
    addRow () {
      if (this.tableData.length < 5) {
        this.tableData.push({
          index: this.tableData.length,
          badType: '',
          badReasons: '',
          badCount: 1,
          badReasonsOptions: []
        })
      }
    },

    // 删除表格行
    deleteRow (row) {
      const index = this.tableData.indexOf(row)
      if (this.tableData.length > 1) {
        this.tableData.splice(index, 1)
      }
    },

    // 校验不良原因
    judgeBadReasons (val, row) {
      const index = this.tableData.indexOf(row)
      let ret = true
      this.tableData.forEach(o => {
        if (index !== o.index) {
          if (parseInt(val) === parseInt(o.badReasons)) {
            ret = false
          }
        }
      })
      return ret
    }
  }
}
</script>

<style scoped lang="stylus">
  /deep/ .q-select__dropdown-icon {
    width 24px
    height 24px
    font-size 24px
    color rgba(0, 0, 0, .54)
  }
  .text {
    font-size 16px
    width 100px
    color #333
    margin-left 28px
    padding-bottom 20px
  }
  .dialog{
    .dialog-title{
      padding 12px 16px
      line-height 1
      font-size 18px
    }
    .dialog-content{
      .name{
        font-size 16px
        display inline-block
        width 80px
      }
    }
  }
  .text {
    width 160px
    font-size 16px
    text-align left
    color #333
    margin-left 28px
    padding-bottom 20px
    cursor pointer
  }
</style>
